import React from 'react';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import { WeaDialog, WeaUpload, WeaRightMenu, WeaLocaleProvider, WeaSearchGroup, WeaFormItem, WeaSelect,WeaCheckbox} from "ecCom";
import { Button, Spin, message } from "antd";
const getLabel = WeaLocaleProvider.getLabel;
import ImportLog from '../../../public/importlog/ImportLog';
import SelectOptions from '../../goal/goalimport/SelectOptions';
@inject("taskImportStore")
@observer
export default class ImportIndex extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            rightMenu: [// 右键菜单
                {
                    key: '0',
                    icon: <i className='icon-coms-leading-in' />,
                    content: getLabel(25649, '开始导入'),
                    onClick: () => this.startImport()
                },
            ],
            logvisable: false, // 展示导入日志
            checkOptions:[
                {key: "lastname",selected: false,showname: getLabel(25034, '姓名')},
                {key: "id",selected: true,showname: getLabel(128556,'人员ID')},
                {key: "loginid",selected: false,showname: getLabel(412,'登录名')},
                {key: "workcode",selected: false,showname: getLabel(20120,'工作编号')},
                {key: "mobile",selected: false,showname: getLabel(22482,'手机号码')},
                {key: "email",selected: false,showname: getLabel(20869,'邮箱')}, 
            ],
            operateOptions:[
                {key: "add",selected: true,showname: getLabel(1421,'新增')},
                {key: "update",selected: false,showname:getLabel(17744,'更新')},
            ],
            checkValue:"lastname",
            operateValue:"add",
            showSelectOptions:false,
            createDate:"",
            isremind:0,
            hasimport:0
        },
        this.uploading = false;
    }

    componentWillMount() {//一些初始化请求
        
    }
    //开始导入
    startImport = () => {
        const { operateValue,createDate} = this.state;
        if(createDate=="" && operateValue=="update"){
            message.warn(getLabel(521479, '请填写导入日期'))
            return;
        }
        const { taskImportStore } = this.props;
        if (this.uploading) {
            taskImportStore.loading = true;
            this.refs.importtaskupload.doUpload();
        } else {
            message.warn(getLabel(32153, '请选择附件'))
            return;
        }
    }
    cleanValues() {
        this.setState({checkValue:"id",operateValue:"add",showSelectOptions:false,logvisable: false,hasimport:0,createDate:"",isremind:0});
        this.uploading = false;
    }
    onCancel = () => {
        this.cleanValues();
        if (typeof this.props.onlyClose === "function") {
            this.props.onlyClose(this.state.hasimport);
        }
    }

    upload = (ids, list) => {
        const { taskImportStore } = this.props;
        if (ids.length <= 0) {
            message.warn(getLabel(32153, '请选择附件'))
            taskImportStore.loading = false;
            return;
        }
        let { checkValue, operateValue,isremind,createDate} = this.state;
        this.setState({ logvisable: true,hasimport:1 });
        if(operateValue=="update"){
            isremind = 0;
        }
        taskImportStore.importTask({ fileid: ids[0], checkType:checkValue,importtype:operateValue,isremind:isremind,createdate:createDate});
    }

    setUploading = (listB) => {
        this.uploading = listB.length > 0 ? true : false;
    }

    onlyClose = () => {
        this.setState({ logvisable: false })
    }

    //更改下拉选项
    onOptionChange = (type,value) =>{
        if(type == "operateValue"){
            if(value == "add"){
                this.setState({[type]:value,showSelectOptions:false})
                return;
            }else{
                this.setState({[type]:value,showSelectOptions:true})
                return;
            }
        }
        this.setState({[type]:value})
    }

    selectOptionCallBack = (type,value) =>{
        this.setState({[type]:value})
    }
    getButton(ecId){
        const {taskImportStore:{loading}} = this.props;
        return [<Button ecId={`${ecId}_Button@wztkix@importdata`} type="primary" loading={loading} onClick={this.startImport}>{getLabel(25649, '开始导入')}</Button>,
                <Button ecId={`${ecId}_Button@yfiirj@close`} type="ghost" onClick={this.onCancel}>{getLabel(31129, '取消')}</Button>]
    }
    render() {
        const { taskImportStore,importvisable } = this.props;
        const {loading,reslutData,ifupload} = taskImportStore;
        const {checkOptions,operateOptions,logvisable,checkValue,operateValue,showSelectOptions,rightMenu,isremind} = this.state;
        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@gzltw4`} title={getLabel(28577,'导入任务')} className="workrelate-wea-goal-import"
                icon='icon-coms-implement'
                iconBgcolor='rgb(150, 53, 138)'
                visible={importvisable}
                buttons={this.getButton(this.props.ecId || '')}
                onCancel={() => this.onCancel()}
                style={{ width: 800, height: 580 }}
                hasScroll>
                <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@0ladth`} spinning={loading}>
                    <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@ecj6uz`} datas={rightMenu}>
                        <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@iperkf`} title={getLabel(81711, '基本信息')} showGroup={true} >
                            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@jbyy1l`} label={getLabel(384017, '验证字段')} labelCol={{ span: 6 }} wrapperCol={{ span: 16 }}>
                                <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@skmv2i`}
                                    options={checkOptions} style={{width:150}}
                                    value={checkValue}
                                    viewAttr={2}
                                    onChange={(v) => {
                                        this.onOptionChange("checkValue",v);
                                    }}
                                />
                            </WeaFormItem>
                            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@nth1jc`} label={getLabel(126207,'操作类型') } labelCol={{ span: 6 }} wrapperCol={{ span: 16 }}>
                                <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@7gl0ew`}
                                    options={operateOptions}
                                    value={operateValue}
                                    style={{width:150}}
                                    viewAttr={2}
                                    helpfulTip={operateValue=="update"?getLabel(521489,'根据名称，导入人，导入日期更新对应的导入数据') :""}
                                    onChange={(v) => {
                                        this.onOptionChange("operateValue",v);
                                    }}
                                />
                            </WeaFormItem>
                            {operateValue=="add" && <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@41va2y`} label={getLabel(6078,'是否提醒') } labelCol={{ span: 6 }} wrapperCol={{ span: 16 }}>
                                <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@lsj2t3`} value={isremind} display="switch" viewAttr={2} style={{ display: 'inline' }} onChange={(v) =>  this.onOptionChange("isremind",v)} />
                            </WeaFormItem>}
                            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@gewabp`} label={getLabel(32153, '请选择附件')} labelCol={{ span: 6 }} wrapperCol={{ span: 16 }}>
                                {ifupload &&<WeaUpload ecId={`${this && this.props && this.props.ecId || ''}_WeaUpload@uwo6fc`}
                                    uploadUrl="/api/doc/upload/uploadFile"
                                    category="string"
                                    viewAttr={3}
                                    limitType={'xls,xlsx'}
                                    isDetail={false}
                                    autoUpload={false}
                                    showClearAll={false}
                                    onChange={(ids, list) => this.upload(ids, list)}
                                    getShowListDatas={(listT, listB) => this.setUploading(listB)}
                                    ref={'importtaskupload'}
                                    maxFilesNumber={1}
                                    sortable={false}/>}
                            </WeaFormItem>
                            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@0oyrm9`} label={getLabel(19971, '模板文件')} labelCol={{ span: 6 }} wrapperCol={{ span: 16 }}>
                                <a className="workrelate-goal-download" href="/workrelate/task/import/workrelatetask.xls">{getLabel(27625, '模板下载')}</a>
                            </WeaFormItem>
                        </WeaSearchGroup>
                        {showSelectOptions && <SelectOptions ecId={`${this && this.props && this.props.ecId || ''}_SelectOptions@n02z4r`} onCallBack = {(type,value)=>this.selectOptionCallBack(type,value)}></SelectOptions>}
                        <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@6zkgy5`} title={getLabel(33803, '导入说明')} showGroup={true} >
                            <div style={{ "paddingLeft": "20px", "paddingRight": "20px" }}>
                                <div>1.{getLabel(521434, '导入操作者默认为创建人,责任人不填写默认为创建人')}</div>
                                <div>2.{getLabel(524549, "如果导入数据过多，导入可能需要较长时间，请不要“刷新”或“关闭窗口”")}</div>
                                <div>3.{getLabel(524550, '重复验证字段说明：')}</div>
                                <div style={{marginLeft:20}}>① {getLabel(524551, '选择“姓名(lastname)”时，模板中的人员相关字段需要填写人员姓名')}</div>
                                <div style={{marginLeft:20}}>② {getLabel(524552, '选择“人员id(id)”时，模板中的人员相关字段需要填写人员id')}</div>
                                <div style={{marginLeft:20}}>③ {getLabel(524553, '选择“登录名(loginid)”时，模板中的人员相关字段需要填写人员登录名')}</div>
                                <div style={{marginLeft:20}}>④ {getLabel(524554, '选择“工作编号(workcode)”时，模板中的人员相关字段需要填写工作编号')}</div>
                                <div style={{marginLeft:20}}>⑤ {getLabel(524555, '选择“手机号码(mobile)”时，模板中的人员相关字段需要填写手机号码')}</div>
                                <div style={{marginLeft:20}}>⑥ {getLabel(524556, '选择“邮箱(email)”时，模板中的人员相关字段需要填写邮箱')}</div>
                            </div>
                        </WeaSearchGroup>
                        <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@iuziaf`} visible={logvisable} title={getLabel(24835, '导入日志')} icon='icon-coms-implement' iconBgcolor='rgb(150, 53, 138)'
                            style={{ width: 700, height: 580 }}
                            onCancel={this.onlyClose}
                            buttons={[<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@robl8f@close`} type="ghost" onClick={this.onlyClose}>{getLabel(309, '关闭')}</Button>]}>
                            <ImportLog ecId={`${this && this.props && this.props.ecId || ''}_ImportLog@022ar7`} loading={loading} reslutData={reslutData} type ={"TASK_IMPORT_INFO"} />
                        </WeaDialog>
                    </WeaRightMenu>
                </Spin>
            </WeaDialog>
        )
    }
}